<template>
  <div class="goods-order">
    <div class="goods-check">
      <van-checkbox v-model="goodsData['isChecked']" />
    </div>
    <div class="goods-img">
      <van-image fit="cover" :src="goodsData['goodsImg']" />
    </div>
    <div class="goods-data">
      <p class="goods-title" v-text="goodsData['goodsTitle']">这是标题</p>
      <p class="goods-description" v-text="goodsData['goodsTitle']">已选规格</p>
      <div class="goods-alter">
        <div class="goods-num">
          ￥
          <span v-text="goodsData['goodsPrice']">00.00</span>
        </div>
        <div class="goods-button">
          <button @click="sub">-</button>
          <span v-text="goodsData['goodsNum']"> 1 </span>
          <button @click="add">+</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Image as VanImage , Checkbox} from 'vant';

export default {
  name: "GoodsOrder",
  props: {
    goodsDatas:{
      type: Object
    }
  },
  data(){
    return{
      checked: true,
      goodsData: this.goodsDatas
    }
  },
  components: {
    'van-image': VanImage,
    'van-checkbox': Checkbox
  },
  mounted() {
    console.log(this.goodsData)
  },
  methods:{
    sub(){
      this.goodsData.goodsNum --;
      this.$emit('sub',this.goodsData.goodsNum);
    },
    add(){
      this.goodsData.goodsNum ++;
      this.$emit('sub',this.goodsData.goodsNum ,1);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./GoodsOrder.scss";
</style>
